<template>
  <div class="storage-management">
    <div class="form-header">
      <h3>{{ t('dashboard.profile.storage.title') }}</h3>
      <p>{{ t('dashboard.profile.storage.subtitle') }}</p>
    </div>

    <!-- 存储概览 -->
    <div class="storage-overview">
      <div class="storage-card">
        <div class="storage-visual">
          <el-progress
            type="circle"
            :percentage="storagePercentage"
            :width="120"
            :stroke-width="8"
            :color="storageColor"
          />
        </div>
        <div class="storage-info">
          <h4>{{ t('dashboard.profile.storage.overview') }}</h4>
          <p class="storage-text">
            {{ formatFileSize(authStore.user?.storageUsed || 0) }} / 
            {{ formatFileSize(authStore.user?.storageQuota || 0) }}
          </p>
          <p class="storage-percentage">{{ t('dashboard.profile.storage.used_percentage', { percentage: storagePercentage }) }}</p>
        </div>
      </div>
    </div>

    <!-- 文件类型统计 -->
    <div class="file-stats">
      <h4>{{ t('dashboard.profile.storage.fileTypeDistribution') }}</h4>
      <div class="stats-grid">
        <div v-for="stat in fileTypeStats" :key="stat.type" class="stat-item">
          <div class="stat-icon" :style="{ backgroundColor: stat.color }">
            <el-icon>
              <component :is="stat.icon" />
            </el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-name">{{ t(stat.name) }}</div>
            <div class="stat-count">{{ stat.count }} {{ t('dashboard.profile.storage.file_unit') }}</div>
            <div class="stat-size">{{ formatFileSize(stat.size) }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 大文件列表 -->
    <div class="large-files">
      <h4>{{ t('dashboard.profile.storage.largestFiles') }}</h4>
      <el-table :data="largeFiles" style="width: 100%">
        <el-table-column prop="name" :label="t('dashboard.profile.storage.table.name')" min-width="200">
          <template #default="{ row }">
            <div class="file-name">
              <el-icon class="file-icon">
                <component :is="getFileIcon(row.type)" />
              </el-icon>
              <span>{{ row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="size" :label="t('dashboard.profile.storage.table.size')" width="120">
          <template #default="{ row }">
            {{ formatFileSize(row.size) }}
          </template>
        </el-table-column>
        <el-table-column prop="type" :label="t('dashboard.profile.storage.table.type')" width="100" />
        <el-table-column prop="updatedAt" :label="t('dashboard.profile.storage.table.modified')" width="150">
          <template #default="{ row }">
            {{ formatDate(row.updatedAt) }}
          </template>
        </el-table-column>
        <el-table-column :label="t('dashboard.profile.storage.table.actions')" width="100">
          <template #default="{ row }">
            <el-button type="danger" size="small" @click="handleDeleteFile(row)">
              {{ t('dashboard.profile.storage.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 清理建议 -->
    <div class="cleanup-suggestions">
      <h4>{{ t('dashboard.profile.storage.cleanup') }}</h4>
      <div class="suggestion-list">
        <div class="suggestion-item">
          <el-icon class="suggestion-icon"><Delete /></el-icon>
          <div class="suggestion-content">
            <h5>{{ t('dashboard.profile.storage.suggestions.duplicates_title') }}</h5>
            <p>{{ t('dashboard.profile.storage.suggestions.duplicates_text', { count: 5, size: formatFileSize(50 * 1024 * 1024) }) }}</p>
          </div>
          <el-button type="primary" size="small">{{ t('dashboard.profile.storage.suggestions.start_cleanup') }}</el-button>
        </div>
        
        <div class="suggestion-item">
          <el-icon class="suggestion-icon"><FolderDelete /></el-icon>
          <div class="suggestion-content">
            <h5>{{ t('dashboard.profile.storage.suggestions.trash_title') }}</h5>
            <p>{{ t('dashboard.profile.storage.suggestions.trash_text', { count: 12, size: formatFileSize(120 * 1024 * 1024) }) }}</p>
          </div>
          <el-button type="primary" size="small">{{ t('dashboard.profile.storage.suggestions.empty_trash') }}</el-button>
        </div>
        
        <div class="suggestion-item">
          <el-icon class="suggestion-icon"><DocumentDelete /></el-icon>
          <div class="suggestion-content">
            <h5>{{ t('dashboard.profile.storage.suggestions.temp_title') }}</h5>
            <p>{{ t('dashboard.profile.storage.suggestions.temp_text') }}</p>
          </div>
          <el-button type="primary" size="small">{{ t('dashboard.profile.storage.suggestions.clear_cache') }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Document, Picture, VideoPlay, Headset, 
  Delete, FolderDelete, DocumentDelete 
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const { t } = useI18n()

// 计算存储使用百分比
const storagePercentage = computed(() => {
  const used = authStore.user?.storageUsed || 0
  const quota = authStore.user?.storageQuota || 1
  return Math.round((used / quota) * 100)
})

// 存储进度条颜色
const storageColor = computed(() => {
  const percentage = storagePercentage.value
  if (percentage >= 90) return '#f56c6c'
  if (percentage >= 70) return '#e6a23c'
  return '#67c23a'
})

// 文件类型统计数据
const fileTypeStats = ref([
  {
    type: 'document',
    name: 'dashboard.profile.storage.file_types.document',
    count: 45,
    size: 120 * 1024 * 1024,
    icon: 'Document',
    color: '#409eff'
  },
  {
    type: 'image',
    name: 'dashboard.profile.storage.file_types.image',
    count: 128,
    size: 350 * 1024 * 1024,
    icon: 'Picture',
    color: '#67c23a'
  },
  {
    type: 'video',
    name: 'dashboard.profile.storage.file_types.video',
    count: 12,
    size: 1.2 * 1024 * 1024 * 1024,
    icon: 'VideoPlay',
    color: '#e6a23c'
  },
  {
    type: 'audio',
    name: 'dashboard.profile.storage.file_types.audio',
    count: 23,
    size: 80 * 1024 * 1024,
    icon: 'Headset',
    color: '#f56c6c'
  }
])

// 大文件列表
const largeFiles = ref([
  {
    id: 1,
    name: '项目演示视频.mp4',
    size: 256 * 1024 * 1024,
    type: t('dashboard.profile.storage.file_types.video'),
    updatedAt: '2024-01-15T10:30:00Z'
  },
  {
    id: 2,
    name: '设计稿合集.psd',
    size: 180 * 1024 * 1024,
    type: t('dashboard.profile.storage.file_types.image'),
    updatedAt: '2024-01-14T15:20:00Z'
  },
  {
    id: 3,
    name: '数据备份.zip',
    size: 150 * 1024 * 1024,
    type: t('dashboard.profile.storage.file_types.archive'),
    updatedAt: '2024-01-13T09:15:00Z'
  }
])

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化日期
const formatDate = (dateString: string): string => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 获取文件图标
const getFileIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    [t('dashboard.profile.storage.file_types.video')]: 'VideoPlay',
    [t('dashboard.profile.storage.file_types.image')]: 'Picture',
    [t('dashboard.profile.storage.file_types.audio')]: 'Headset',
    [t('dashboard.profile.storage.file_types.archive')]: 'Document'
  }
  return iconMap[type] || 'Document'
}

// 删除文件
const handleDeleteFile = async (file: any) => {
  try {
    await ElMessageBox.confirm(
      t('dashboard.profile.storage.delete_confirm.text', { name: file.name }),
      t('dashboard.profile.storage.delete_confirm.title'),
      {
        confirmButtonText: t('dashboard.profile.avatarDialog.confirm'),
        cancelButtonText: t('dashboard.profile.avatarDialog.cancel'),
        type: 'warning'
      }
    )
    
    // TODO: 调用删除文件API
    ElMessage.success(t('dashboard.profile.storage.delete_confirm.success'))
    
    // 从列表中移除
    const index = largeFiles.value.findIndex(f => f.id === file.id)
    if (index > -1) {
      largeFiles.value.splice(index, 1)
    }
    
  } catch {
    // 用户取消删除
  }
}
</script>

<style lang="scss" scoped>
.storage-management {
  .form-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color-light);

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0 0 8px 0;
      transition: color 0.3s ease;
    }

    p {
      font-size: 14px;
      color: var(--text-color-secondary);
      margin: 0;
      transition: color 0.3s ease;
    }
  }

  .storage-overview {
    margin-bottom: 32px;

    .storage-card {
      display: flex;
      align-items: center;
      gap: 32px;
      padding: 24px;
      background-color: var(--bg-color-secondary);
      border-radius: 12px;
      border: 1px solid var(--border-color-light);
      transition: all 0.3s ease;

      .storage-info {
        h4 {
          font-size: 16px;
          font-weight: 600;
          color: var(--text-color-primary);
          margin: 0 0 8px 0;
          transition: color 0.3s ease;
        }

        .storage-text {
          font-size: 18px;
          font-weight: 600;
          color: var(--text-color-primary);
          margin: 0 0 4px 0;
          transition: color 0.3s ease;
        }

        .storage-percentage {
          font-size: 14px;
          color: var(--text-color-secondary);
          margin: 0;
          transition: color 0.3s ease;
        }
      }
    }
  }

  .file-stats, .large-files, .cleanup-suggestions {
    margin-bottom: 32px;

    h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0 0 16px 0;
      transition: color 0.3s ease;
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background-color: var(--bg-color-secondary);
      border-radius: 8px;
      border: 1px solid var(--border-color-light);
      transition: all 0.3s ease;

      .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
      }

      .stat-info {
        .stat-name {
          font-size: 14px;
          font-weight: 500;
          color: var(--text-color-primary);
          margin-bottom: 4px;
          transition: color 0.3s ease;
        }

        .stat-count, .stat-size {
          font-size: 12px;
          color: var(--text-color-secondary);
          transition: color 0.3s ease;
        }
      }
    }
  }

  .file-name {
    display: flex;
    align-items: center;
    gap: 8px;

    .file-icon {
      color: var(--theme-primary);
    }
  }

  .suggestion-list {
    .suggestion-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      background-color: var(--bg-color-secondary);
      border-radius: 8px;
      border: 1px solid var(--border-color-light);
      margin-bottom: 12px;
      transition: all 0.3s ease;

      .suggestion-icon {
        font-size: 24px;
        color: var(--theme-primary);
      }

      .suggestion-content {
        flex: 1;

        h5 {
          font-size: 14px;
          font-weight: 600;
          color: var(--text-color-primary);
          margin: 0 0 4px 0;
          transition: color 0.3s ease;
        }

        p {
          font-size: 12px;
          color: var(--text-color-secondary);
          margin: 0;
          transition: color 0.3s ease;
        }
      }
    }
  }
}
</style>
